<template>
  <div class="login-wrap">
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
      <h3 class="title">置信规则库（BRB）系统</h3>
      <el-form-item label-width="25%" label="用户名：" prop="username">
        <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item label-width="25%" label="密码：" prop="password">
        <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;text-align: center">
        <el-button type="primary" style="width:30%;" @click="onSubmit('ruleForm')" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose">
      <span>账号或密码错误</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import { login } from '../api/userMG'
export default {
  name: 'login',
  data() {
    return {
      logining: false,
      ruleForm: {
        //username和password默认为空
        username: '',
        password: '',
      },
      //rules前端验证
      rules: {
        username:[
          {required:true,message:'账号不能为空',trigger:'blur'}
        ],
        password:[
          {required: true,message: '密码不能为空',trigger:'blur'}
        ]
      },
      //对话框显示和隐藏
      dialogVisible:false,
      dialogVisible2:false
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.$message({
      message: '用户名：djd 密码：123456',
      type: 'success'
    })
  },
  methods: {
    onSubmit(formName) {
      //为表单绑定验证功能
      this.$refs[formName].validate((valid) =>{
        if (valid){
          this.logining = true
          if(this.ruleForm.username == "djd" && this.ruleForm.password == "123456"){
            this.logining = false
            this.$store.commit('login', 'true')
            this.$router.push({ path: '/BRB/first' })
          }else{
            this.dialogVisible2 = true;
            return false;
          }
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    }
  },
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  font-size: 25px;
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>
